<template>
  <div>
  <ElButton type="primary" @click="showDialog">打开对话框</ElButton>
  <ElDialog v-bind="dialogProps" :visible = "dialogVisible" >
    <p>这里是对话框内容...</p>
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="dialogVisible = false">取消</ElButton>
        <ElButton type="primary" @click="dialogVisible = false">确定</ElButton>
      </span>
    </template>
  </ElDialog>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {getCurrentInstance} from 'vue';
import { ElDialog, ElButton } from 'element-plus';

const dialogVisible = ref(false);
const dialogProps = reactive({
    "model-value":false,
    title: '对话框标题',
    width: '50%',
    center: true, // 居中显示
});
const {proxy} = getCurrentInstance();
function  showDialog() {
  dialogProps["model-value"] = true;
  dialogProps.title='21343';
}
</script>

<style scoped>

</style>
